<!-- 合约信息 -->
<template>
	<a-descriptions title="承租企业" :column="4" class="ant-descriptions-blockquote">
		<a-descriptions-item label="承租企业信息">
			{{ props.contractData?.enterPriseDTO?.enterPriseName }}/{{ props.contractData?.enterPriseDTO?.enterPrisePhone }}
		</a-descriptions-item>
		<a-descriptions-item label="企业联系人">
			<a-space>
				<span v-if="!showBtn">
					{{ props.contractData?.enterPriseDTO?.linkmanName }} / {{ props.contractData?.enterPriseDTO?.linkmanPhone }}/{{
						props.contractData?.enterPriseDTO?.linkmanPost
					}}
				</span>
				<a-select
					v-else
					v-model:value="enterPriseUserId"
					placeholder="请选择联系人"
					style="width: 260px"
					:options="props.enterpriseData"
					size="small"
					:field-names="{label: 'period', value: 'id'}" />
				<a v-if="!showBtn && ![1, '1',2,'2','4',4].includes(props.approvalStatus as string)" @click="updateLinkman">
					<form-outlined />
				</a>
				<a v-if="showBtn" @click="showBtn = false">取消</a>
				<a v-if="showBtn" @click="submit">保存</a>
			</a-space>
		</a-descriptions-item>
		<a-descriptions-item label="费用支付配置">
			<a-descriptions-item label="费用配置">
				<a @click="lookDispose">查看配置</a>
			</a-descriptions-item>
		</a-descriptions-item>
		<a-descriptions-item label="合作周期">
			{{ props.contractData?.enterPriseDTO?.beginTime }} - {{ props.contractData?.enterPriseDTO?.endTime }}
		</a-descriptions-item>
		<!-- <a-descriptions-item label="联系人信息">{{ props.contractData?.enterPriseDTO?.linkmanName }} / {{ props.contractData?.enterPriseDTO?.linkmanPhone }}</a-descriptions-item> -->
		<a-descriptions-item label="协议优惠方案" :span="4">
			<a-descriptions
				v-if="props.contractData?.discounts?.length"
				size="small"
				colon
				bordered
				:column="4"
				class="discount-descriptions">
				<template v-for="discount in props.contractData?.discounts || []" :key="discount.id">
					<a-descriptions-item label="优惠名称" :span="discount.id === '-1' ? 3 : 1">
						<a-typography-text :content="discount.discountName" :ellipsis="{tooltip: true}" style="width: 200px" />
					</a-descriptions-item>
					<template v-if="discount.id !== '-1'">
						<a-descriptions-item label="优惠有效期">
							{{ discount.beginTime || '-' }} ~ {{ discount.endTime || '-' }}
						</a-descriptions-item>
						<a-descriptions-item label="优惠方案">
							{{ discountTypeMap[discount.discountType] }} 、 {{ discount.discountScale }}% 、
							{{ discount.feeSubjects.map(o => o.name).join('/') }} 、
							{{ discount.stackable ? '可叠加' : '不可叠加' }}
						</a-descriptions-item>
					</template>
					<a-descriptions-item label="成交方式">
						{{ SIGN_TYPE_MAP[discount.signType] || '新签' }}
					</a-descriptions-item>
				</template>
			</a-descriptions>
			<template v-else>无优惠</template>
		</a-descriptions-item>
		<!-- <a-descriptions title="费用支付配置" class="ant-descriptions-blockquote"></a-descriptions> -->
	</a-descriptions>
	<a-descriptions>
		<template #title>
			<div class="d-module-title">
				<b class="employee">合同信息</b>
				<a-tag :color="labelStatus[props.status]?.color || labelStatus[props.contractData.label]?.color">
					{{ labelStatus[props.status]?.name || labelStatus[props.contractData.label]?.name }}
				</a-tag>
				<a
					v-if="hasPermissions(['mk_contract_charter_party_bjhtxx']) &&
							![1, '1'].includes(props.approvalStatus as number) &&
							![41,42].includes(props.status)"
					@click.stop="visibles.updateContract = true">
					<FormOutlined class="update-icon" />
					<a class="update-information">编辑合同信息</a>
				</a>
			</div>
		</template>
		<a-descriptions-item label="合同编号">{{ props.contractData?.contractNo }}</a-descriptions-item>
		<a-descriptions-item label="成交方式">{{ contractType[props.contractData?.signType] }}</a-descriptions-item>
		<a-descriptions-item label="合同周期">{{ props.contractData?.beginTime }} - {{ props.contractData?.endTime }}</a-descriptions-item>
		<a-descriptions-item label="承租总价">
			{{ props.contractData?.price }}
			<span v-if="props.contractData?.price">元/月</span>
			(共{{ props.contractData?.houseCount }}间)
		</a-descriptions-item>
		<a-descriptions-item label="押金总价">{{ props.contractData?.deposit?.toFixed(2) }}元</a-descriptions-item>
		<a-descriptions-item label="付款方式">
			押{{ props.contractData?.depositMonth }}
			<!--  -->
			<span v-if="props.contractData?.periodMonth !== 99 && props.contractData?.periodMonth !== 100">付</span>
			{{
				props.contractData?.periodMonth === 99 || props.contractData?.periodMonth === 100
					? `${payMany[props.contractData?.periodMonth]}`
					: `${props.contractData?.periodMonth}`
			}}
		</a-descriptions-item>
		<!-- payPatternValue 付款模式值 -->
		<a-descriptions-item label="收租日设置">
			{{
				props.contractData?.payPattern === 1
					? `提前${props.contractData?.payPatternValue}天收租`
					: `${
							props.contractData?.payPattern === 2
								? `固定${props.contractData?.payPatternValue}号收租`
								: `提前一个月固定${props.contractData?.payPatternValue}号收租`
					  }`
			}}
		</a-descriptions-item>
		<a-descriptions-item label="合同附件">
			<a @click="record.upload = true">查看附件</a>
		</a-descriptions-item>
		<a-descriptions-item label="录入时间">{{ props.contractData?.createDateTime }}</a-descriptions-item>
		<a-descriptions-item label="补充说明">{{ props.contractData?.addExplanation }}</a-descriptions-item>
	</a-descriptions>
	<!-- <a-descriptions title="费用支付配置" class="ant-descriptions-blockquote">
		<a-descriptions-item label="费用配置">
			<a @click="lookDispose">查看配置</a>
		</a-descriptions-item>
	</a-descriptions> -->
	<a-descriptions title="签约信息" class="ant-descriptions-blockquote">
		<a-descriptions-item label="签约部门">{{ props.contractData?.signDepName }}</a-descriptions-item>
		<a-descriptions-item label="签约人">{{ props.contractData?.signEmpName }}</a-descriptions-item>
		<a-descriptions-item label="合同维护人">{{ props.contractData?.maintainerName }}</a-descriptions-item>
		<a-descriptions-item label="签约时间">{{ props.contractData?.signTime }}</a-descriptions-item>
	</a-descriptions>
	<!-- 退租展示 -->
	<a-descriptions
		v-if="props.status === 33 ||props.status === 31 || props.status === 32 || props.contractData?.lablel === 31 || props.contractData?.label === 32"
		title="退租信息"
		class="ant-descriptions-blockquote">
		<a-descriptions-item label="退租日期">{{ props.contractData?.quiteDate }}</a-descriptions-item>
		<a-descriptions-item label="处理人">{{ props.contractData?.rejectName }}</a-descriptions-item>
		<a-descriptions-item label="处理时间">{{ props.contractData?.rejectTime }}</a-descriptions-item>
		<a-descriptions-item label="备注">{{ props.contractData?.quiteComment }}</a-descriptions-item>
	</a-descriptions>
	<!-- 作废展示 -->
	<a-descriptions v-if="props.status === 41" title="作废信息" class="ant-descriptions-blockquote">
		<a-descriptions-item label="作废人">
			{{ props.contractData?.rejectName + '-' + props.contractData?.rejectPhone }}
		</a-descriptions-item>
		<a-descriptions-item label="作废时间">{{ props.contractData?.rejectTime }}</a-descriptions-item>
		<a-descriptions-item label="作废原因">{{ props.contractData?.quiteComment }}</a-descriptions-item>
	</a-descriptions>

	<!-- 查看配置 -->
	<cost-allocation v-model:visible="record.cost" :id="props.contractData?.id" :approvalStatus="props.approvalStatus"></cost-allocation>

	<!-- 附件 -->
	<!-- :biz-id="props.id" -->
	<file-upload-dialog
		v-model:visible="record.upload"
		:biz-id="props.contractData?.id"
		:isDetails="['1',1,2,'2','4',4].includes(props.approvalStatus as string)" />
	<!--修改合同信息 -->
	<update-contract v-model:visible="visibles.updateContract" :dataSource="props.contractData" @success="emits('close')"></update-contract>
</template>

<script setup lang="ts">
	import {reactive, ref, onMounted} from 'vue'
	import CostAllocation from './cost-allocation.vue'
	import FileUploadDialog from '@/components/common/file-upload-dialog.vue'
	import {discountTypeMap} from '@/constant/enterprise-customers'
	import {contractType, payMany, paymentMode, labelStatus} from '@/utils/charter-contract'
	import {FormOutlined} from '@ant-design/icons-vue'
	import {updateEnterprise} from '@/api/contract'
	import {SIGN_TYPE_MAP} from '@/interface/contract'
	import {useStore} from '@/store/index'
	import UpdateContract from '@/components/contract/contract-detail-dialog/charter-contract/update-contract.vue'

	const props = defineProps<{
		contractData: any
		status: any
		processInstanceId?: string
		approvalStatus?: string | number
		enterPriseUserId?: string
		enterpriseData?: any
	}>()
	const visibles = reactive({
		updateContract: false
	})
	const emits = defineEmits(['close'])
	const hasPermissions = useStore().hasPermissions

	const record = reactive({
		cost: false,
		upload: false,
		status: '',
		disposeData: []
	})

	const showBtn = ref(false)

	const enterPriseUserId = ref('')

	const lookDispose = () => {
		record.cost = true
	}

	const updateLinkman = () => {
		enterPriseUserId.value = props.enterPriseUserId as string
		console.log(props.enterpriseData, props.enterPriseUserId, enterPriseUserId.value, 'enterpriseData')
		showBtn.value = true
	}

	const submit = () => {
		updateEnterprise({
			enterPriseUserId: enterPriseUserId.value,
			id: props.contractData?.id
		}).then(() => {
			showBtn.value = false
			emits('close')
		})
	}
</script>

<style lang="less" scoped>
	.employee {
		margin-right: 10px;
	}

	.discount-descriptions {
		:deep .ant-descriptions-row {
			th,
			td {
				font-size: 12px;
				padding: 4px 8px;
			}
		}
	}
</style>
